<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tea UI</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-PI8n5gCcz9cQqQXm3PEtDuPG8qx9oFsFctPg0S5zb8g=" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha256-CDOy6cOibCWEdsRiZuaHf8dSGGJRYuBGC+mjoJimHGw=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <h1>Let's make some Tea!</h1>
        <div class="row mt-2">
            <div class="col col-2 form-floating">
                <select id="tealeaf-selector" class="form-select" aria-label="Select tealeaf" required>
                    <option th:each="tealeaf, status : ${tealeaves}" th:selected="${status.first}" th:value="${tealeaf.getName()}" th:text="${tealeaf.getName()} + ' (' + ${tealeaf.getType()} + ')'"></option>
                    <option value="english breakfast">english breakfast (!)</option>
                </select>
                <label for="tealeaf-selector" class="form-label">Tealeaf</label>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col col-2 form-floating">
                <select id="water-selector" class="form-select" aria-label="Select water" required>
                    <option th:each="water, status : ${waters}" th:selected="${status.first}" th:value="${water.getSize()}" th:text="${water.getSize()} + ' (' + ${water.getAmount()} + ')'"></option>
                </select>
                <label for="water-selector" class="form-label">Water</label>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col col-2">
                <button id="steep-it-button" type="button" class="btn btn-primary">Steep it!</button>
            </div>
        </div>

        <div id="tea-card-container" class="row mt-5" hidden>
            <div id="tea-card" class="col col-4 p-0 card">
                <div id="tea-header" class="card-header"></div>
                <ul class="list-group list-group-flush">
                    <li id="steeping-time" class="list-group-item"></li>
                    <li id="water-amount" class="list-group-item"></li>
                    <li id="water-temperature" class="list-group-item"></li>
                    <li id="tealeaves-name" class="list-group-item"></li>
                    <li id="tealeaves-type" class="list-group-item"></li>
                    <li id="tealeaves-amount" class="list-group-item"></li>
                </ul>
            </div>
        </div>
        <div id="alert-container" class="m-5 alert alert-danger" role="alert" hidden></div>
    </div>
    <script src="/assets/steep.js"></script>
</body>
</html>
